<!--基本信息设置 BaseMessage-->
<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>基本信息设置</el-breadcrumb-item>
        <div v-if="this.$store.state.login.user.type == 1" style="text-align: right" >
          <span style="color: red">请选择KTV</span>
          <el-select v-model="$store.state.login.shopID" clearable  @change="SelectShop()" placeholder="请选择KTV查询">
            <el-option
              v-for="item in $store.state.login.shopData"
              :key="item.shop_id"
              :label="item.name"
              :value="item.shop_id">
            </el-option>
          </el-select>
        </div>

      </el-breadcrumb>

    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <div class="divCss">
          <p>店铺专属二维码：</p>
          <img :src="shop_code" alt="" width="150" height="150">
        </div>
        <div class="divCss">
          <p>店铺Logo：</p>
          <my-upload ref="my_upload_logo" :medioData="false" @change="SuccessUploadLogo" ></my-upload>
        </div>
        <div class="divCss">
          <p>店铺背景图片：</p>
          <my-upload ref="my_upload_background" @change="SuccessUploadBackground" ></my-upload>
        </div>
        <div class="divCss">
          <p>KTV名称：</p>
          <el-input v-model="name" style="flex: 1;" placeholder="请输入KTV名称"></el-input>
        </div>
        <div class="divCss">
          <p>电话号码：</p>
          <el-input v-model="phone" style="flex: 1;" placeholder="请输入电话号码" ></el-input>
        </div>
        <div class="divCss">
          <p>地址：</p>
          <div style="width: 100%;height: 32px;line-height: 32px;border: 1px solid #dcdfe6;
          display: flex;flex: 1;padding: 0 10px 0 10px;">
            <span>
               {{address}}
            </span>
            <i   @click="openmap" slot="suffix" class="el-input__icon el-icon-location"
                 style="font-size: 20px;color: #409eff;flex: 1;text-align: right"></i>

          </div>
          <!--<el-input-->
            <!--style="flex: 1;"-->
            <!--placeholder=""-->
            <!--v-model="address">-->
          <!--</el-input>-->
        </div>
        <div class="divCss">
          <p>营业执照：</p>
          <my-upload ref="my_upload_license" @change="SuccessUploadLicense" ></my-upload>
        </div>
        <div class="divCss">
          <p>营业时间：</p>
          <el-time-select
            v-model="time1"
            placeholder="请选择时间"
            style="width: 150px;margin-right: 10px;"
            :picker-options="{
                  start: '00:00',
                  step: '00:10',
                  end: '23:59',
                }">
          </el-time-select>
          -
          <el-time-select
            v-model="time2"
            :picker-options="{
               start: '00:00',
               step: '00:10',
               end: '23:59',
              }"
            placeholder="请选择时间"
            style="width: 150px;margin-left: 10px;">
          </el-time-select>
          <!--<el-time-picker-->
            <!--is-range-->
            <!--v-model="business_hours"-->
            <!--range-separator="至"-->
            <!--start-placeholder="开始时间"-->
            <!--end-placeholder="结束时间"-->
            <!--value-format="hh:mm:ss"-->
            <!--placeholder="选择时间范围">-->
          <!--</el-time-picker>-->
        </div>
        <div class="divCss">
          <p>VR链接：</p>
          <el-input style="flex: 1;" v-model="vr_url" placeholder="请输入VR链接" ></el-input>
        </div>
        <div class="divCss">
          <p></p>
          <span style="font-size: 12px;color: gray">
            注意：添加VR链接时需要在https://后面加上8ype2ngvnw.720yun.否则无效，
            例如https://720yun.com/t/c9vki7fysi7 => https://8ype2ngvnw.720yun.com/t/c9vki7fysi7
          </span>
        </div>
        <div class="divCss">
          <p>温馨提示：</p>
          <el-input style="flex: 1;" v-model="tips" placeholder="请输入温馨提示" ></el-input>
        </div>
        <div class="divCss">
          <p>活动封面图：</p>
          <my-upload ref="my_upload_activity"  @change="SuccessUploadActivity"></my-upload>
        </div>
        <div class="divCss">
          <p>活动详情图片：</p>
          <my-upload ref="my_upload_activity_details" @change="SuccessUploadActivityDetails"></my-upload>
        </div>
        <div class="divCss" style="margin-top: 80px;">
          <el-button size="medium" type="primary" @click="submitSave()">保存</el-button>
          <el-button  size="medium">取消</el-button>
        </div>
      </el-row>
    </el-row>
    <el-dialog title="选择位置" :visible.sync="addressVisible" width="80%" :modal-append-to-body="false">
      <el-col   style="padding-left: 20px;">
        <div style="position: absolute;top: 80px; right: 20px;z-index: 999999;">
          <el-input placeholder="请输入位置搜索关键字" v-model="searchValue" clearable id="search_id"></el-input>
        </div>
        <div id="container" class="cmap" ></div>
        <span >您选择的位置：{{address}}</span>
      </el-col>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="okAddress()" >确 定</el-button>
        <el-button @click="addressVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import MyUpload from '../../components/MyUpload'
  export default {
    name: "PrivateRoom",
    components:{
      MyUpload,
    },
    activated() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      if (this.$store.state.login.user.type == 1) {
        this.shop_id = this.$store.state.login.shopID
      }else {
        this.shop_id = this.$store.state.login.user.id
      }
      this.getstart()
    },
    data() {
      return {
        name:'',
        address:'',
        lat:'',
        lng:'',
        logo:'',
        background:'',
        phone:'',
        license:'',
        time1:'',
        time2:'',
        business_hours:'',
        tips:'',
        vr_url:'',
        activity:'',
        activity_details:'',
        shop_code:'',
        searchValue:'',
        map:'',
        marker:'',
        position:'',
        geocoder:'',
        addressVisible:false,
        shop_id:'',
      }
    },
    methods: {
      SelectShop(){
        this.shop_id = this.$store.state.login.shopID
        this.getstart()
      },
      test(){
        console.log(this.time2)
      },
      submitSave(){
        let thi = this
        const parms = {
          shop_id:thi.shop_id,
          name:thi.name,
          address:thi.address,
          lat:thi.lat,
          lng:thi.lng,
          logo:thi.logo,
          background:thi.background,
          phone:thi.phone,
          license:thi.license,
          business_hours:thi.time1 + '-' + thi.time2,
          tips:thi.tips,
          vr_url:thi.vr_url,
          activity:thi.activity,
          activity_details:thi.activity_details,
        }
        console.log(parms)
        if (thi.name == '') {
          thi.$message.error('请输入KTV名称')
          return
        }
        if (thi.address == '') {
          thi.$message.error('请选择地图地址')
          return
        }
        if (thi.lat == '' || thi.lng == '') {
          thi.$message.error('经纬度为空，请选择地图地址！')
          return
        }
        if (thi.logo == '') {
          thi.$message.error('请上传店铺logo')
          return
        }
        if (thi.background == '') {
          thi.$message.error('请上传店铺背景')
          return
        }
        if (thi.phone == '') {
          thi.$message.error('请输入电话号码')
          return
        }
        if (thi.license== '') {
          thi.$message.error('请上传营业执照')
          return
        }
        if (parms.business_hours == '') {
          thi.$message.error('请选择营业时间')
          return
        }
        if (thi.vr_url == '') {
          thi.$message.error('请输入VR链接')
          return
        }
        if (thi.tips == '') {
          thi.$message.error('请输入温馨提示')
          return
        }
        if (thi.activity == '') {
          thi.$message.error('请上传活动封面图')
          return
        }
        if (thi.activity_details == '') {
          thi.$message.error('请上传活动详情图')
          return
        }
        // if (thi.name == '' || thi.address == '' || thi.lat == '' || thi.lng == '' || thi.logo == ''
        //   || thi.background == '' || thi.phone == '' || thi.license == '' || thi.business_hours == ''
        //   || thi.vr_url == ''|| thi.tips == '' || thi.activity == '' || thi.activity_details == '' ) {
        //   thi.$message.error('请上传完整信息')
        //   return
        // }
        thi.mySubmit('editShop', parms).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },
      SuccessUploadActivity(res){
        this.activity = res
      },
      SuccessUploadActivityDetails(res){
        this.activity_details = res
      },
      SuccessUploadLicense(res){
        this.license = res
        console.log(res)
        console.log(this.license)
      },
      SuccessUploadLogo(res){
        this.logo = res
      },
      SuccessUploadBackground(res){
        this.background = res
      },
      delImg(index){
        this.activity.splice(index,1)
      },
      getstart() {
        let thi = this
        const prams = {
          shop_id: thi.shop_id,
        }
        thi.mySelectAll('shopDetails',prams).then(function (value) {
          var data = value.data
          thi.name = data.name
          thi.address = data.address
          thi.lat = data.lat
          thi.lng = data.lng
          if (data.logo) {
            thi.$nextTick(function () {
              thi.$refs.my_upload_logo.fileList = [{url:data.logo,progress:0,code:200}]
            })
          }

          if (data.background) {
            thi.$nextTick(function () {
              thi.$refs.my_upload_background.fileList = [{url:data.background,progress:0,code:200}]
            })
          }
          if (data.license) {
            thi.$nextTick(function () {
              thi.$refs.my_upload_license.fileList = [{url:data.license,progress:0,code:200}]
            })
          }
          if (data.activity) {
            thi.$nextTick(function () {
              thi.$refs.my_upload_activity.fileList = [{url:data.activity,progress:0,code:200}]
            })
          }
          if (data.activity_details) {
            thi.$nextTick(function () {
              thi.$refs.my_upload_activity_details.fileList = [{url:data.activity_details,progress:0,code:200}]
            })
          }
          thi.logo = data.logo
          thi.background = data.background
          thi.phone = data.phone
          thi.license = data.license
          if (data.business_hours && data.business_hours !== null) {
            thi.business_hours = data.business_hours.split('-')
            thi.time1 = thi.business_hours[0]
            thi.time2 = thi.business_hours[1]
          }else {
            thi.time1 = ''
            thi.time2 = ''
          }
          thi.tips = data.tips
          thi.vr_url = data.vr_url
          thi.activity = data.activity
          thi.activity_details = data.activity_details
          thi.shop_code = data.shop_code
        })
      },
      okAddress(){
        this.addressVisible = false
      },
      openmap(){
        this.addressVisible = true
        setTimeout(()=>{
          this.loadmap()
        },200)
      },
      //地图初始化
      loadmap(){
        console.log('2')
        let thi = this
        let map = new AMap.Map('container', {
          zoom: 12
        });
        thi.map=map

        // 搜索功能
        AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
          var autoOptions = {
            // 城市，默认全国
            city: "北京",
            // 使用联想输入的input的id
            input: "search_id"
          }
          var autocomplete= new AMap.Autocomplete(autoOptions)
          var placeSearch = new AMap.PlaceSearch({
            city:'北京',
            map:map
          })
          AMap.event.addListener(autocomplete, 'select', function(e){
            //TODO 针对选中的poi实现自己的功能
            placeSearch.search(e.poi.name)
          })
        })
        let position=map.getCenter();
        let marker = new AMap.Marker({
          position: position
        });
        marker.setMap(map);
        let geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"

        });
        thi.geocoder=geocoder;
        thi.position= position
        thi.marker= marker
        AMap.event.addListener(map, 'mapmove', function () {
          thi.position = map.getCenter();
          marker.setPosition( thi.position);

        });
        AMap.event.addListener(map, 'moveend', function () {
          thi.changePosition();
        });
      },
      changePosition(){
        let thi = this
        let position = thi.position
        let geocoder = thi.geocoder
        let marker = thi.marker
        geocoder.getAddress(position, function(status, result) {
          if(status==='complete' && result.info==='OK') {
            var province=result.regeocode.addressComponent.province;
            var city=result.regeocode.addressComponent.city;
            var addresss=result.regeocode.formattedAddress;

            thi.address = addresss;
            var address=addresss.replace(province,'');
            address=address.replace(city,'');
            var content='<div style="text-align:center;width:220px;padding:4px;overflow:hidden">';
            content+='<div style="font-size:14px;font-weight:bold;white-space:normal;margin-left: 20px; "">'+address+'</div></div>';
            marker.setLabel({
              content: content
            });
            console.log(position)
            thi.lat = position.lat
            thi.lng = position.lng
          }
        });
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
  .el-row{
    /*防止页面抖动*/
    width: calc(100% - 2px) !important;
  }
  .cmap{
    width: 100%;
    height: 400px;
    margin-bottom: 10px;
  }
  .search-cont{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999999;
  }
  .mapTxt {
    text-align: center;
    width: 220px;
    padding: 4px;
    overflow: hidden;
    font-size: 14px;
    font-weight: bold;
    white-space: normal;
    margin-left: 40px;
    margin-top: 40px;
  }
  p{
    margin: 0;
    padding: 0;
  }
  .divCss{
    display: flex;
    margin: 20px 200px 20px 10px;
  }
  .divCss p{
    width: 130px;
    text-align: right;
  }
</style>

